<template>
   <div class="newAddresstWrap">
     <mt-popup
      v-model="newAddressVisible"
      position="right"
      class="mintPop ">
      <div class="addressCon">
        <div class="addressTop">
         <p>
           <span v-text="province.name" @click="provinceList(province)"></span>
           <span v-text="city.name" @click="cityList(city)"></span>
           <span v-text="county.name"></span>
           <span v-text="district.name"></span>
           <span>请选择</span>
          </p>
        </div>
        <div class="addressList" v-show="provinceDefault" >
          <ul>
            <li v-for="(item,index) in data" :key="item.id" @click="getCity(item)">{{item.name}}</li>
          </ul>
        </div>
         <div class="addressList" v-show="citesDefault">
          <ul>
            <li v-for="(item,index) in cities" :key="item.id" @click="getCounty(item)">{{item.name}}</li>
          </ul>
        </div>
        <div class="addressList" v-show="CountiesDefault">
          <ul>
            <li v-for="(item,index) in Counties" :key="item.id" @click="getDistricts(item)">{{item.name}}</li>
          </ul>
        </div>
         <div class="addressList" v-show="districtDefault">
          <ul>
            <li v-for="(item,index) in districts" :key="item.id" @click="getDistrict(item)">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="backBtn" @click="back">
        <p>返回</p>
      </div>
    </mt-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: "北京", id: "1" },
        { name: "黑龙江", id: "10" },
        { name: "内蒙古", id: "11" },
        { name: "江苏", id: "12" },
        { name: "山东", id: "13" },
        { name: "安徽", id: "14" },
        { name: "浙江", id: "15" },
        { name: "福建", id: "16" },
        { name: "湖北", id: "17" },
        { name: "湖南", id: "18" },
        { name: "广东", id: "19" },
        { name: "上海", id: "2" },
        { name: "广西", id: "20" },
        { name: "江西", id: "21" },
        { name: "四川", id: "22" },
        { name: "海南", id: "23" },
        { name: "贵州", id: "24" },
        { name: "云南", id: "25" },
        { name: "西藏", id: "26" },
        { name: "陕西", id: "27" },
        { name: "甘肃", id: "28" },
        { name: "青海", id: "29" },
        { name: "天津", id: "3" },
        { name: "宁夏", id: "30" },
        { name: "新疆", id: "31" },
        { name: "台湾", id: "32" },
        { name: "重庆", id: "4" },
        { name: "河北", id: "5" },
        { name: "港澳", id: "52993" },
        { name: "山西", id: "6" },
        { name: "河南", id: "7" },
        { name: "辽宁", id: "8" },
        { name: "钓鱼岛", id: "84" },
        { name: "吉林", id: "9" }
      ],
      newAddressVisible: false,
      province: "",
      city: "",
      county: "",
      district: "",
      cities: [],
      Counties: [],
      districts: [],
      provinceDefault: true,
      citesDefault: false,
      CountiesDefault: false,
      districtDefault: false,
      addressCode:'',
      addressName:''
    };
  },
  methods: {
    show() {
      this.newAddressVisible = true;
    },
    hide() {
      this.newAddressVisible = false;
      this.province= "",
      this.city = "";
      this.county = "";
      this.district = "";
      this.cities= [],
      this.Counties= [],
      this.districts= [],
      this.provinceDefault=true,
      this.citesDefault=false,
      this.CountiesDefault=false,
      this.districtDefault=false,
      localStorage.setItem('address',JSON.stringify({"addressName":this.addressName,"addressCode":this.addressCode}))
    },
    back() {
      this.hide();
    },
    getCity(item) {
      this.province = item;
      this.$axios
        .get(
          process.env.baseUrl + "/web-avicare-1.0/address/load/bypid/" + item.id
        )
        .then(res => {
          this.cities = res.data.list;
          this.provinceDefault = false;
          this.citesDefault = true;
          (this.CountiesDefault = false), (this.districtDefault = false);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getCounty(item) {
      this.city = item;
      this.$axios
        .get(
          process.env.baseUrl + "/web-avicare-1.0/address/load/bypid/" + item.id
        )
        .then(res => {
          this.Counties = res.data.list;
          this.provinceDefault = false;
          this.citesDefault = false;
          this.CountiesDefault = true;
          this.districtDefault = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getDistricts(item) {
      this.county = item;
      this.$axios
        .get(
          process.env.baseUrl + "/web-avicare-1.0/address/load/bypid/" + item.id
        )
        .then(res => {
          if (res.data.list == 0) {
            this.addressCode= this.province.id +"_" +this.city.id +"_"+this.county.id
            this.addressName= this.province.name +" " +this.city.name +" "+this.county.name
            this.backSeletion()
            this.hide()
            return
          } else {
            this.districts = res.data.list;
            this.CountiesDefault = false;
            this.districtDefault = true;
            this.citesDefault = false;
            this.provinceDefault = false;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getDistrict(item) {
      this.district = item;
      this.addressCode =
      this.province.id +"_" +this.city.id +"_" +this.county.id +"_"+this.district.id;
      this.addressName =this.province.name +" "+this.city.name +" "+this.county.name +" "+this.district.name;
      this.backSeletion()
      this.hide()
    },
    backSeletion(){
      this.$root.Bus.$emit("addressed",{"addressCode":this.addressCode,"addressName":this.addressName})
    },
    provinceList(item) {
      this.getCity(item);
      this.city = "";
      this.county = "";
      this.district = "";
    },
    cityList(item) {
      this.getCounty(item);
      this.county = "";
      this.district = "";
    }
  }
};
</script>

<style lang="less" scoped>
.addressWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .mintPop {
    width: 6.5rem;
    height: 100%;
    .addressCon {
      .addressTop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        border-bottom: 1px solid #d7d7d9;
        background-color: #fff;
        z-index: 10;
        p {
          height: 0.7rem;
          padding-left: 0.2rem;
          span {
            float: left;
            margin-right: 0.2rem;
            line-height: 0.7rem;
            font-size: 0.28rem;
            color: #333;
            &:last-child {
              color: #78bfff;
              border-bottom: 0.03rem solid #78bfff;
              padding-bottom: 0.1rem;
            }
          }
        }
      }
      .addressList {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 6.5rem;
        overflow-y: scroll;
        ul {
          height: 100%;
          margin-left: 0.2rem;
          overflow: scroll;
          margin-top: 0.7rem;
          margin-bottom: 1.2rem;
          li {
            list-style: none;
            font-size: 0.28rem;
            line-height: 0.88rem;
            color: #232323;
          }
        }
      }
    }
    .backBtn {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 1.2rem;
      background-color: #eee;
      padding: 0.15rem 0.2rem;
      box-sizing: border-box;
      p {
        border: 1px solid #979797;
        border-radius: 0.1rem;
        color: #4e4e4e;
        font-size: 0.36rem;
        line-height: 0.9rem;
        text-align: center;
        background-color: #fff;
        width: 100%;
      }
    }
  }
}
</style>
